<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/require-2.3.6.js"></script>
	</head>
	<body>
		<h1>Hello</h1>
		<div id="xx">
			
		</div>
		<script>
			require.config({
				// 优先加载的模块
				map: {
					"*": {
						'css': 'js/require-css-min.js'
					}
				},
				// 模块地址映射
				paths: {
					layer:"https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer",
					jquery: "https://lib.baomitu.com/jquery/1.12.4/jquery.min",
					'jq-spa': "../dist/jq-spa.min",
					vue: 'https://cdn.bootcss.com/vue/2.5.16/vue.min'
				},
				// 非标准amd脚本配置
				shim: {
					layer: {
						// 依赖包
						deps: ['jquery', 'css!https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/theme/default/layer.min.css'],
						// 从window的哪个属性获取导出对象
						exports: 'layer'
					}
				}
			})
			require(['jquery','jq-spa','vue'],function(jQuery,a,vue){
				window.Vue = vue;
				// 配置vue方式解析组件模板
				$.spa.config({
					template: {
						// vue处理无需这一步
						init: function(){},
						preRender: function(html,data){
							var vue = new Vue({
								data: data,
								methods: this.$methods,
								template: html
							});
							this.$vue = vue ;
							return vue ;
						},
						render: function(vue,dom){
							vue.$mount(dom);
						},
						beforeMount: function(vue){
							this.$refs = vue.$refs ;
						}
					}
				});
				
				$("#xx").render('vue-cmp.html',{
					name:"张三"
				});
			})
		</script>
	</body>
</html>
